<template>
    <div>
      <!-- 新增导演表单 -->
      <el-form 
        ref="form" :model="form" :rules="rules"
        label-width="100px" style="width:500px;">
        <el-form-item label="导演姓名" prop="directorName">
          <el-input v-model="form.directorName"></el-input>
        </el-form-item>
        <el-form-item label="导演头像" prop="directorAvatar">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:9000/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img 
              v-if="form.directorAvatar" 
              :src="form.directorAvatar" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">立即新增</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
      
    </div>
  </template>
  
  <script>
  import myaxios from '@/http/MyAxios';
  import httpApi from '@/http';
  export default {
    data() {
      return {
        form: {
          directorName: '',   // 绑定导演名字
          directorAvatar: '', // 绑定导演头像
        },
        rules:{
          directorName: [{required:true, message:'必填', trigger:'blur'}],
          directorAvatar: [{required:true, message:'必填', trigger:'blur'}],
        }
      }
    },
    methods: {
      submit() {
        // 手动验证表单
        this.$refs['form'].validate(valid=>{
          if(valid){ // 表单验证成功
            console.log('验证成功', this.form)
            httpApi.DirectorApi.add(this.form).then(res=>{
              this.$message({
                message: '恭喜你，导演添加成功',
                type: 'success'
              })
              // 将表单重置
              this.$refs['form'].resetFields()
            })
          }else{ // 表单验证失败
            console.log('验证失败')
          }
        })
      },
      // 处理上传成功后的业务
      handleAvatarSuccess(res, file) {
        console.log(res)
        // 将上传成功后的图片访问路径，存入form对象
        this.form.directorAvatar = res.data
      },
  
      // 处理上传之前的格式大小验证
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;
  
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    },
  };
  </script>
  
  <style lang="scss" scoped></style>
  <style>
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 120px;
      height: 120px;
      line-height: 120px;
      text-align: center;
    }
    .avatar {
      width: 120px;
      display: block;
    }
  </style>
  
  